<template>
  <div class="aside">
    <el-menu @select="handleSelect" :default-active="Array.isArray($route.params.id) ? $route.params.id[0] : $route.params.id">
      <el-menu-item v-for="(menu, index) in menuLists" :index="menu.id" >
        <span>{{menu.label}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'Aside',
  props: {
    menuMap: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    '$store.state.key': {
      immediate: true,
      handler(val, oldVal) {
        if(val != oldVal) {
          this.handleMenuLists()
        }
      }
    }
  },
  created() {
    // console.log('$route.params.id', this.$route.params.id)
  },
  components: {

  },
  data() {
    return {
      menuLists: []
    }
  },
  methods: {
    handleSelect(e) {
      // console.log('$route', this.$route.params.id)
      // console.log('select', e)
      this.$router.push(`/page/${e}`)
    },
    handleMenuLists() {
      this.menuLists = [];
      this.$http.get('/bff/imagepic/bucket/listBuckets', {
        params: {
          key: this.$store.state.key
        }
      }).then(res => {
        // console.log('listBuckets', res);
        if(res.data.success) {
          res.data.data.sort((a,b) => new Date(a.creationDate).getTime() - new Date(b.creationDate).getTime()).forEach(element => {
            // console.log('element', element);
            this.menuMap[`${element.name}`] && this.menuLists.push({
              id: element.name,
              label: this.menuMap[`${element.name}`]
            }) 
          })
        }
      })
    }
  },
})
</script>

<style lang="scss">
.aside {
  height: 100%;
  background-color: #fff;
  width: 100%;
  border-right: 1px solid #d7d7d7;
}
</style>